<template>
  <div class="lable-top">
    <el-form label-position="top" size="mini">
      <el-row :gutter="10">
        <el-col :span="4">
          <el-form-item label="终端">
            <el-select v-model="search.agent_id" filterable>
              <el-option
                v-for="(item, index) in agentList"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
                <span style="float: left">{{ item.name }}</span>
                <span
                  :class="['status', item.online ? 'success' : 'fail']"
                  style="right: 0%; position: absolute; top: 50%; transform: translate(-100%, -50%)"
                ></span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label=" " />
        </el-col>
        <el-col :span="10">
          <el-form-item v-permission="['super']" label="组织">
            <el-select v-model="search.org_id" filterable>
              <el-option
                v-for="(item, index) in company"
                :key="index"
                :label="item.name"
                popper-class="w100"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item v-permission="['super']" label=" ">
            <el-button class="ml5" @click="handleChangeOrg">
              获取组织终端列表
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form label-position="top" size="mini">
      <el-row :gutter="10">
        <el-col :span="3">
          <el-form-item label="指令">
            <el-select
              v-model="command_id"
              filterable
              @change="handleChooseCommand"
            >
              <el-option
                v-for="(item, index) in command_list"
                :key="index"
                :label="item.name"
                :value="item.type"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label=" ">
            <el-button @click="handleCommandExecute">执行</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="指令UID">
            <el-input
              v-model="UUID"
              placeholder="请输入..."
              spellcheck="false"
            />
          </el-form-item>
        </el-col>

        <el-col :span="3">
          <el-form-item label=" ">
            <el-button @click="handleCommandRefreshStatus">
              <i
                ><img
                  alt=""
                  src="../../assets/icon/refresh.png"
                  style="height: 0.8rem; margin-right:2px;"
              /></i>
              刷新指令状态
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label=" ">
            <el-button @click="handleCommandGetAll">
              <i
                ><img
                  alt=""
                  src="../../assets/icon/search.png"
                  style="height: 0.8rem; margin-right:2px;"/></i
              >查看指令历史</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form label-position="top" size="mini">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="指令参数编辑区">
            <el-input
              v-model="command_edit"
              :autosize="{ minRows: 4, maxRows: 6 }"
              placeholder="请输入"
              spellcheck="false"
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-input
          :autosize="{ minRows: 16, maxRows: 20 }"
          readonly
          spellcheck="false"
          type="textarea"
          :value="result"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
const formatJson = (json, options) => {
  var reg = null,
    formatted = "",
    pad = 0,
    PADDING = "    ";
  options = options || {};
  options.newlineAfterColonIfBeforeBraceOrBracket =
    options.newlineAfterColonIfBeforeBraceOrBracket === true;
  options.spaceAfterColon = options.spaceAfterColon !== false;
  if (typeof json !== "string") {
    json = JSON.stringify(json);
  } else {
    json = JSON.parse(json);
    json = JSON.stringify(json);
  }
  reg = /([{}])/g;
  json = json.replace(reg, "\r\n$1\r\n");
  reg = /([[\]])/g;
  json = json.replace(reg, "\r\n$1\r\n");
  reg = /(,)/g;
  json = json.replace(reg, "$1\r\n");
  reg = /(\r\n\r\n)/g;
  json = json.replace(reg, "\r\n");
  reg = /\r\n,/g;
  json = json.replace(reg, ",");
  if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
    reg = /:\r\n\{/g;
    json = json.replace(reg, ":{");
    reg = /:\r\n\[/g;
    json = json.replace(reg, ":[");
  }
  if (options.spaceAfterColon) {
    reg = /:/g;
    json = json.replace(reg, ":");
  }
  json.split("\r\n").forEach(function(node) {
    var i = 0,
      indent = 0,
      padding = "";

    if (node.match(/\{$/) || node.match(/\[$/)) {
      indent = 1;
    } else if (node.match(/\}/) || node.match(/\]/)) {
      if (pad !== 0) {
        pad -= 1;
      }
    } else {
      indent = 0;
    }

    for (i = 0; i < pad; i++) {
      padding += PADDING;
    }

    formatted += padding + node + "\r\n";
    pad += indent;
  });
  return formatted;
};
import org_getall from "@/utils/mixin/org_getall";
import agent_name_list from "@/utils/mixin/agent_name_list";
import response from "@/api/response";
export default {
  name: "ObtainEvidence",
  mixins: [org_getall, agent_name_list],
  data: () => {
    return {
      command_list: [],
      search: {
        org_id: "",
        agent_id: ""
      },
      command_id: "",
      result: "",
      command_edit: "",
      UUID: ""
    };
  },
  mounted() {
    this.onLoad();
  },
  methods: {
    async onLoad() {
      await this.loadingOrgGetall();
      await this.loadingAgent(this.search.org_id || 0);
      await this.handleLoadingCommandList();
    },
    handleChooseCommand() {
      let command_list = this.command_list,
        index = command_list.map(k => k.type).indexOf(this.command_id),
        obj = command_list[index];
      this.result = obj.description;
      this.command_edit = formatJson(JSON.stringify(obj.data));
    },
    handleCommandRefreshStatus() {
      if (!this.UUID) {
        this.$message.warning("请输入指令UID");
        return;
      }
      if (!this.search.agent_id) {
        this.$message.warning("请选择终端");
        return;
      }
      response
        .get({
          agent_id: this.search.agent_id,
          task_uid: this.UUID
        })
        .then(res => {
          this.result = res.data.command;
        });
    },
    handleLoadingCommandList() {
      return response.command_list().then(res => {
        this.command_list = res.data.list;
      });
    },
    handleCommandExecute() {
      if (!this.command_id) {
        this.$message.warning("请选择指令");
        return;
      }
      if (!this.search.agent_id) {
        this.$message.warning("请选择终端");
        return;
      }
      response
        .send({
          agent_id: this.search.agent_id,
          type: this.command_id,
          data: JSON.parse(this.command_edit)
        })
        .then(res => {
          this.UUID = res.data.task_uid;
        });
    },
    handleCommandGetAll() {
      if (!this.search.agent_id) {
        this.$message.warning("请选择终端");
        return;
      }
      response
        .getall({
          agent_id: this.search.agent_id
        })
        .then(res => {
          this.result = res.data.results;
        });
    },
    handleChangeOrg() {
      this.$set(this.search, "agent_id", "");
      this.loadingAgent(this.search.org_id || 0);
      this.command_id = "";
      this.result = "";
      this.command_edit = "";
      this.UUID = "";
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-button {
  width: 100%;
}
.status {
  width: 15px;
  height: 15px;
  border-radius: 100px;
}

.success {
  background-color: $--color-success;
}

.fail {
  background-color: $--color-danger;
}
</style>
